<template>
	<view v-if="visible" class="modal-mask" @click="closeOnMask && close()">
		<view class="modal-container" @click.stop>
			<view class="modal-header">
				<text>{{ title }}</text>
				<u-icon v-if="showClose" name="close" @click="close" color="#999" size="20" />
			</view>
			<view class="modal-content">
				<slot></slot>
			</view>
			<view class="modal-footer" v-if="showFooter">
				<u-button v-if="showCancel" type="default" @click="handleCancel" :text="cancelText" />
				<u-button type="primary" @click="handleConfirm" :text="confirmText" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue';

	const props = defineProps({
		visible: Boolean,
		title: String,
		showClose: {
			type: Boolean,
			default: true
		},
		showFooter: {
			type: Boolean,
			default: true
		},
		showCancel: {
			type: Boolean,
			default: true
		},
		confirmText: {
			type: String,
			default: '确认'
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		closeOnMask: {
			type: Boolean,
			default: true
		},
	});

	const emit = defineEmits(['update:visible', 'confirm', 'cancel']);

	const close = () => {
		emit('update:visible', false);
	};

	const handleConfirm = () => {
		emit('confirm');
		close();
	};

	const handleCancel = () => {
		emit('cancel');
		close();
	};
</script>

<style scoped>
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.modal-container {
		width: 80%;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.modal-header {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-content {
		padding: 30rpx;
	}

	.modal-footer {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}
</style>